feat: redesign UI of the phishing warning page #176
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/@metamask/design-tokens@1.13.0, npm/caniuse-lite@1.0.30001561 |
mindofmar
previously approved these changes
Oct 16, 2024
mindofmar
previously approved these changes
Oct 16, 2024
There was a problem hiding this comment.
This is looking great! To align with the MetaMask Design System and enhance the brand integrity and trust of this page, I suggest replacing the green on the button with the primary/default blue. I've created a draft PR with some UI updates here: #177
cryptotavares
approved these changes
Oct 17, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR gives a fresh new look to MetaMask's phishing page with a bunch of UI/UX improvements. IMO this is a great v1 of the redesign, lets push this out there and then we can start v2 which will include better metric tracking on all clicks to help us better understand how to improve this page!
Key Improvements
New UI: Redesigned the UI to prioritize essential information and avoid overwhelming users with excessive text.
Added MetaMask Logo: Added the MetaMask logo on the phishing warning page to better tell users that MetaMask is the one safeguarding them from malicious websites. Even people at MetaMask thought this was googles warning page sometimes.
Green
My PortfolioButton: Added a greenMy Portfoliobutton, allowing users to navigate safely to their portfolio. This will also direct more traffic to the portfolio page, with the warning screen being displayed ~400k times monthly. Shortly in the future this will redirect users to the security tab in the portfolio.Twitter Share Button: Added a Twitter Share button enabling users to share their experience directly from the phishing warning page.
Current Phishing Page:
New Phishing Page
Twitter Share Button Functionality